<!DOCTYPE HTML>
<html>
<head>
  <title>Graph2d | Toggle Groups Example</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

      div.graphs {
          width:300px;
          display:inline-block;
      }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
    This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
    all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
    you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
    We then use a setOptions like so:


    <pre class="prettyprint lang-js">
        graph2d1.setOptions({
            groups:{
                visibility:{
                    0:true,               // group id:0 visible
                    1:false,              // group id:1 hidden
                    2:false,              // group id:2 hidden
                    3:false,              // group id:3 hidden
                    "__ungrouped__":false // default group hidden
                }
            }
        })
    </pre>
</div>
<br />

<div class="graphs" id="visualization1"></div>
<div class="graphs" id="visualization2"></div>
<div class="graphs" id="visualization3"></div>
<div class="graphs" id="visualization4"></div>
<div class="graphs" id="visualization5"></div>
<div class="graphs" id="visualization6"></div>

<script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
        groups.add({
        id: 0,
        content: names[0],
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});

    groups.add({
        id: 1,
        content: names[1],
        options: {
            style:'bar'
        }});

    groups.add({
        id: 2,
        content: names[2],
        options: {drawPoints: false}
    });

    groups.add({
        id: 3,
        content: names[3],
        options: {
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});

  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-13', y: 60},
    {x: '2014-06-14', y: 40},
    {x: '2014-06-15', y: 55},
    {x: '2014-06-16', y: 40},
    {x: '2014-06-17', y: 50},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 60, group: 2},
    {x: '2014-06-23', y: 10, group: 2},
    {x: '2014-06-24', y: 25, group: 2},
    {x: '2014-06-25', y: 30, group: 2},
    {x: '2014-06-26', y: 20, group: 3},
    {x: '2014-06-27', y: 60, group: 3},
    {x: '2014-06-28', y: 10, group: 3},
    {x: '2014-06-29', y: 25, group: 3},
    {x: '2014-06-30', y: 30, group: 3}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
      defaultGroup: 'ungrouped',
      legend: false,
      graphHeight:200,
      start: '2014-06-10',
      end: '2014-07-04',
      showMajorLabels:false,
      showMinorLabels:false
  };
  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);

  graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
  graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
  graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
  graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
  graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
</script>
</body>
</html>